<template>
  <div class="WithdrawalAudit">
    <div class="searchBox">
      <span class="txt">申请时间</span>
      <el-date-picker
        v-model="timeArr"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptions"
        value-format="yyyy-MM-dd"
        @change="focus"
      >
      </el-date-picker>
      <span class="margin"></span>
      <span class="txt">用户ID</span>
      <el-input v-model="id" clearable placeholder="请输入用户ID"></el-input>
      <span class="margin"></span>
      <span class="txt">手机号</span>
      <el-input
        v-model="phone"
        clearable
        placeholder="请输入用户手机号"
      ></el-input>
      <span class="margin"></span>
      <span class="txt">审核结果</span>
      <el-select v-model="state" :disabled="type != 3" placeholder="请选择">
        <el-option label="不限" value=""> </el-option>
        <el-option label="通过" value="1"> </el-option>
        <el-option label="驳回" value="2"> </el-option>
      </el-select>
      <span class="margin"></span>
      <el-button class="btn" @click="search">搜索</el-button>
    </div>
    <el-radio-group v-model="type" fill="#7b94d8" @change="typeChange">
      <el-radio-button label="1" :disabled="!isDirector"
        >主管审批</el-radio-button
      >
      <el-radio-button label="2" :disabled="!isFinancial"
        >财务审批</el-radio-button
      >
      <el-radio-button label="3">审核结束</el-radio-button>
    </el-radio-group>
    <el-card>
      <div class="export" v-if="type == 3">
        <el-button size="small" @click="exportExcel">导出表格</el-button>
      </div>
      <el-table
        v-loading="loading"
        :data="tableData"
        style="width: 100%; margin-top: 10px"
        :header-cell-style="{ background: '#f5f7fa' }"
      >
        <template slot="empty">
          <el-empty :image-size="200"></el-empty>
        </template>
        <el-table-column prop="requestTime" label="申请时间"> </el-table-column>
        <el-table-column prop="userId" label="用户ID"> </el-table-column>
        <el-table-column prop="name" label="用户昵称"> </el-table-column>
        <el-table-column prop="withdrawalAmount" label="提现金额">
        </el-table-column>
        <el-table-column
          v-if="type == 2"
          key="12"
          label="主管审核信息"
          type="expand"
          width="120px"
        >
          <template slot-scope="scope">
            <el-descriptions :column="4" border>
              <el-descriptions-item label="主管审核时间">
                {{ scope.row.charge_approve_time }}
              </el-descriptions-item>
              <el-descriptions-item label="审批主管">
                {{ scope.row.charge_approve_name }}
              </el-descriptions-item>
              <el-descriptions-item label="主管账号">
                {{ scope.row.charge_account }}
              </el-descriptions-item>
              <el-descriptions-item label="主管IP">
                {{ scope.row.charge_ip }}
              </el-descriptions-item>
            </el-descriptions>
          </template>
        </el-table-column>
        <el-table-column
          v-if="type == 3"
          key="123"
          label="审批信息"
          type="expand"
          width="100px"
        >
          <template slot-scope="scope">
            <el-descriptions :column="4" border>
              <el-descriptions-item label="主管审核时间">
                {{ scope.row.charge_approve_time }}
              </el-descriptions-item>
              <el-descriptions-item label="审批主管">
                {{ scope.row.charge_approve_name }}
              </el-descriptions-item>
              <el-descriptions-item label="主管账号">
                {{ scope.row.charge_account }}
              </el-descriptions-item>
              <el-descriptions-item label="主管IP">
                {{ scope.row.charge_ip }}
              </el-descriptions-item>
              <el-descriptions-item label="财务审核时间">
                {{ scope.row.finance_approve_time }}
              </el-descriptions-item>
              <el-descriptions-item label="审批财务">
                {{ scope.row.finance_approve_name }}
              </el-descriptions-item>
              <el-descriptions-item label="财务账号">
                {{ scope.row.finance_account }}
              </el-descriptions-item>
              <el-descriptions-item label="财务IP">
                {{ scope.row.finance_ip }}
              </el-descriptions-item>
            </el-descriptions>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              plain
              type="info"
              size="small"
              @click="nopass(scope.row.id)"
              >驳 回</el-button
            >
            <el-button
              plain
              type="success"
              size="small"
              @click="pass(scope.row.id)"
              >通 过</el-button
            >
          </template>
        </el-table-column>
        <!-- <el-table-column label="账号管理">
          <template slot-scope="scope">
            <el-button
              plain
              type="warning"
              size="small"
              @click="nopass(scope.row)"
              >禁封提现</el-button
            >
          </template>
        </el-table-column> -->
      </el-table>
      <pagination
        :total="total"
        :page.sync="page"
        :limit.sync="pageSize"
        @pagination="getList"
      />
    </el-card>
    <el-dialog title="驳回" :visible.sync="dialogVisible" width="30%">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="驳回理由">
          <el-radio-group
            v-model="form.quick"
            @change="form.reason = form.quick"
          >
            <el-radio label="疑似刷单">疑似刷单</el-radio>
            <el-radio label="次数过多">次数过多</el-radio>
            <el-radio label="">手动输入理由</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-show="!form.quick" label="">
          <el-input placeholder="请输入理由" v-model="form.reason"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitNopass">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import {
  rechargeWithdrawalAudit,
  rechargeStateHandel,
} from "@/api/AuditManagement";
import Pagination from "@/components/Pagination"; // 分页
export default {
  components: { Pagination },
  data() {
    return {
      loading: false,
      type: "3",
      id: "",
      phone: "",
      state: "",
      timeArr: [],
      startDate: "",
      endDate: "",
      pickerOptions: {
        disabledDate(platformValue) {
          return platformValue.getTime() > Date.now() - 8.64e6;
        },
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      tableData: [],
      total: 0,
      page: 1,
      pageSize: 10,
      dialogVisible: false,
      form: {
        quick: "1",
        reason: "",
      },
      targetId: "",
    };
  },
  methods: {
    focus(time) {
      if (!this.timeArr) {
        this.timeArr = [];
      }
      this.startDate = this.timeArr[0];
      this.endDate = this.timeArr[1];
    },
    typeChange() {
      this.startDate = "";
      this.endDate = "";
      this.id = "";
      this.phone = "";
      this.state = "";
      this.page = 1;
      this.getList();
    },
    search() {
      this.page = 1;
      this.getList();
    },
    async getList() {
      const res = await rechargeWithdrawalAudit({
        startDate: this.startDate ? this.startDate : "",
        endDate: this.endDate ? this.endDate : "",
        last_states: this.state,
        phone: this.phone,
        id: this.id,
        page: this.page,
        pageSize: this.pageSize,
        type: this.type,
      });
      if (res.code == 0) {
        this.total = parseInt(res.data.count);
        this.tableData = res.data.list;
      }
    },
    nopass(id) {
      this.form = {
        quick: "1",
        reason: "",
      };
      this.targetId = id;
      this.dialogVisible = true;
    },
    async submitNopass() {
      const res = await rechargeStateHandel({
        state: "2",
        id: this.targetId,
        type: this.type,
        reject_reason: this.form.reason,
        charge_approve_name: localStorage.getItem("SET_NAME"),
        finance_approve_name: localStorage.getItem("SET_NAME"),
        charge_account: localStorage.getItem("SET_ACCOUNT"),
        finance_account: localStorage.getItem("SET_ACCOUNT"),
      });
      if (res.code == 0) {
        this.$message.success("成功！");
        this.dialogVisible = false;
        this.getList();
      }
    },
    async pass(id) {
      const res = await rechargeStateHandel({
        state: "1",
        id,
        type: this.type,
        reject_reason: "",
        charge_approve_name: localStorage.getItem("SET_NAME"),
        finance_approve_name: localStorage.getItem("SET_NAME"),
        charge_account: localStorage.getItem("SET_ACCOUNT"),
        finance_account: localStorage.getItem("SET_ACCOUNT"),
      });
      if (res.code == 0) {
        this.$message.success("成功！");
        this.dialogVisible = false;
        this.getList();
      }
    },
    async exportExcel() {
      const res = await rechargeWithdrawalAudit({
        startDate: this.startDate ? this.startDate : "",
        endDate: this.endDate ? this.endDate : "",
        last_states: this.state,
        phone: this.phone,
        id: this.id,
        page: 1,
        pageSize: 10000,
        type: this.type,
      });
      const head = [
        "申请时间",
        "用户id",
        "用户昵称",
        "提现金额",
        "主管审核时间",
        "审核主管",
        "主管账号",
        "主管IP",
        "财务审核时间",
        "审核财务",
        "财务账号",
        "财务IP",
      ];
      const fails = [
        "requestTime",
        "userId",
        "name",
        "withdrawalAmount",
        "charge_approve_time",
        "charge_approve_name",
        "charge_account",
        "charge_ip",
        "finance_approve_time",
        "finance_approve_name",
        "finance_account",
        "finance_ip",
      ];
      if (res.data.list.length != 0) {
        this.$excel(res.data.list, head, fails, "审核记录");
      }
    },
  },
  computed: {
    ...mapGetters(["isDirector", "isFinancial"]),
  },
  created() {
    if (this.isDirector) {
      this.type = "1";
    }
    if (!this.isDirector && this.isFinancial) {
      this.type = "2";
    }
    this.getList();
  },
};
</script>

<style lang="less" scoped>
.WithdrawalAudit {
  padding: 20px;
  .searchBox {
    display: flex;
    align-items: center;
    margin: 20px 0;
    .margin {
      margin: 0 10px;
    }
    .txt {
      display: inline-block;
      height: 40px;
      background-color: #f5f7fa;
      line-height: 40px;
      padding-left: 10px;
      color: #9d9399;
      border-radius: 4px 0 0 4px;
      border: 1px solid #dcdfe6;
      border-right: none;
      padding-right: 10px;
    }
    /deep/ .el-input__inner {
      border-radius: 0 4px 4px 0 !important;
    }
    .el-input {
      width: 180px;
    }
  }
  .export {
    text-align: right;
  }
}
</style>